<script setup lang="ts">
import {ref} from 'vue';
import loginTab from "@/components/user/login.vue"
import registryTab from "@/components/user/registry.vue"
import {useUserStore} from "@/stores/useUserStore"
import {ElMessage,ElMessageBox} from "element-plus";
import {router} from "@/router/router";

let showApp = ref(false);
let centerDialogVisible=ref(false)
let activeTab=ref('login')
//关闭当前的登录窗口
function closeDialog() {
  centerDialogVisible.value = false
}
//获取用户状态
const userStore = useUserStore()
//注销

function loginOut() {
  ElMessageBox.confirm('确定要注销吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    userStore.$reset()
  })
}
let chose=ref('home')
function goMovie() {
window.open(router.resolve({path:"/movieList"}).href)
}
//点击切换
function choseNav(tab){
  chose.value=tab
  router.push(tab);
}
</script>

<template>
  <div class="top">
    <div class="logo myFlex-x">
      <img src="@/assets/img/logo.png">
    </div>
    <div class="city myFlex-x">
      武汉
    </div>
    <div class="nav myFlex-x">
      <div class="myFlex-x" @click="choseNav('home')" :class="[chose=='home'?'choseActive':'']">首页</div>
      <div class="myFlex-x" @click="choseNav('movieList')" :class="[chose=='movieList'?'choseActive':'']">
        <router-link to="/movieList">电影</router-link>
      </div>
      <div class="myFlex-x" @click="choseNav('cinemaList')" :class="[chose=='cinemaList'?'choseActive':'']">影院</div>
      <div class="myFlex-x">演出</div>
    </div>
    <div class="block myFlex-x"></div>
    <div class="app myFlex-x" @mouseenter="showApp=true" @mouseleave="showApp=false">
      <img src="@/assets/img/app.png">
      <span>APP下载</span>
      <div class="showApp myFlex-x" v-if="showApp" >
        <img src="@/assets/img/appDown.png">
      </div>
    </div>


    <div class="user myFlex-x" @click="centerDialogVisible=true" v-if="userStore.id==0">
      用户
    </div>
    <div class="user myFlex-x" @click="loginOut" v-else>
      欢迎：{{userStore.userName}}
    </div>
    <el-dialog v-model="centerDialogVisible" title="这是一个弹窗" width="30%" center>
        <template #header>
          <el-radio-group v-model="activeTab">
            <el-radio-button value="login">登录</el-radio-button>
            <el-radio-button value="registry">注册</el-radio-button>
          </el-radio-group>
        </template>
      <component @close="closeDialog" :is="activeTab=='login'?loginTab:registryTab"></component>
    </el-dialog>
  </div>
</template>

<style scoped>
@import '@/assets/css/top.css';
.choseActive{
  background-color: red;
  color:white;
}
</style>
